<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport"
          content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width, minimal-ui"/>
    <meta content="yes" name="apple-mobile-web-app-capable"/>
    <meta content="black" name="apple-mobile-web-app-status-bar-style"/>
    <meta name="format-detection" content="telephone=no"/>
    <title>Title</title>
    <style type="text/css">
        .lottery-wrapper{ width: 60%; float:left}

    </style>
    <script src="../js/jquery-1.12.4.js"></script>
	<script type="text/javascript">
	 
		$(function () {
			setInterval(function(){
				$.ajax({
					url : "/lotteryData",
					type : "get",
					data : {
					},
					success : function(result) {
						if(result.code == 0){
							let obj = result.data;
							fillData(obj);
						}
						console.log(result);
					},
					error : function(XMLHttpRequest, textStatus, errorThrown) {
						console.log("服务器异常!")
					}
				});
			}, 5000);
		})

        function fillData(obj){
            $("#first , #second , #third").html("");
		    if(isEmptyObject(obj)){
		        $("#id_span").css("display","block");
		        $("#id_first , #id_second , #id_third").css("display","none");
                $("#first , #second , #third").html("");
		        return ;
            }
			let first = obj.first;
            let second = obj.second;
            let third = obj.third;
            if(first != undefined && first.length > 0){
                $("#id_first").css("display","block");
                $.each(first , function(i , e){
                    let html = [];
                    html.push("<li>");
                    html.push("<span> " + e.userName + "</span>");
                    html.push("</li>");
                    $("#first").append(html.join(""));
                })
            }
            if(second != undefined && second.length > 0){
                $("#id_second").css("display","block");
                $.each(second , function(ei , e){
                    let html = [];
                    html.push("<li>");
                    html.push("<span> " + e.userName + "</span>");
                    html.push("</li>");
                    $("#second").append(html.join(""));
                })
            }
            if(third != undefined && third.length > 0 ){
                $("#id_third").css("display","block");
                $.each(third , function(i , e){
                    let html = [];
                    html.push("<li>");
                    html.push("<span> " + e.userName + "</span>");
                    html.push("</li>");
                    $("#third").append(html.join(""));
                })
            }
		}

        function isEmptyObject(e) {
            var t;
            for (t in e)
                return !1;
            return !0
        }
    </script>
</head>
<body>


<div class="showlottery-list">
    <h3>查看中奖人员名单：<div th:if="${#lists.isEmpty(first) && #lists.isEmpty(second) && #lists.isEmpty(third)}" id="id_span">无</div></h3>
    <h4 th:style="${first == null || #lists.size(first) == 0 } ?'display:none':'display:block'" id="id_first">一等奖</h4>
    <div id="first">
        <li th:each="obj,userStat : ${first}">
           <span th:text="${obj.userName}"></span>
        </li>
    </div>
    <h4 th:style="${second == null || #lists.size(second) == 0} ?'display:none':'display:block'" id="id_second">二等奖</h4>
    <div id="second">
        <li th:each="obj,userStat : ${second}">
            <span th:text="${obj.userName}"></span>
        </li>
    </div>
    <h4 th:style="${third == null || #lists.size(third) == 0} ?'display:none':'display:block'" id="id_third">三等奖</h4>
    <div id="third">
        <li th:each="obj,userStat : ${third}">
            <span th:text="${obj.userName}"></span>
        </li>
    </div>
</div>


</body>
</html>